<template>
  <div id="index">
    <header class="header">
      <div class="logo">
        <img src="~Public/img/logo.png" alt="">
        <span class="title">昆明新机场高速巡查管理系统</span>
      </div>
      <div class='nav'>
        <!-- <a :class="['navitem',active==='/home' ? 'active' :'']" v-routePms="{name:'home',path:'/home'}">综合展现</a> -->
        <a :class="['navitem','el-icon-map-location',active==='/onepage' ? 'active' :'']" v-routePms="{name:'onepage',path:'/onepage'}">一张图</a> 
        <a :class="['navitem','el-icon-menu',active==='/workbench' ? 'active' :'']" v-routePms="{name:'workbench',path:'/workbench'}" >管理台</a> 
      </div>
      <div class="tool-bar">
        <div class="user" @click="showUserCenter">
          <span class="utitle">
            <img class="uphoto iconfont icon-zhanghao" :src="photoSrc" alt="" srcset="">
            <span class="username" :title="userName">{{userName}}</span>
          </span>
          <userCenter ref="user" @updatePhoto="updatePhoto"></userCenter>
        </div>
        <!-- <div class="message iconfont icon-xiaoxi" title="消息" @click="onShowMsgList">
          <span class="msg-number">{{number}}</span>
        </div>
        <msg ref="msg" ></msg>
        <div class="iconfont icon-bangzhu" title="帮助"  @click="showAbout">
          <help ref="about"></help>
        </div> -->
        <div class="iconfont icon-tuichu" title="退出登录" @click="loginOut" style="padding-top: 5px;"></div>
      </div>
    </header>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import msg from './msg.vue'
import help from './help/index.vue'
import userCenter from './user-center/index.vue'
export default {
  components:{help,msg,userCenter},
  data(){
    var user=JSON.parse(localStorage.user).user
    return{
      number:'',
      active:'/onepage',
      photoSrc:user.headPhoto,
      userName:user.name
    }
  },
  methods:{
    activeNav(to){
      var url=to && to.path || this.$router.currentRoute.path
      if(url.match('/home')){
          this.active="/home"
      }else if(url.match('/onepage')){
          this.active="/onepage"
      }else{
        this.active="/workbench"
      }
    },

    loginOut(){
      localStorage.clear()
      this.$router.push("/login")
    },

    //帮助 &关于
    showAbout(){
      this.$refs.about.showAbout=true
    },

    onShowMsgList(){
      this.$refs.msg.showMsgList=true
    },

    showUserCenter(){
		return
      this.$refs.user.showUserCenter=true
    },

    updatePhoto(src){
      this.photoSrc=src
    }



  },
 
  mounted(){
    this.activeNav()
  },
  beforeRouteUpdate(to,from,next){
    this.activeNav(to)
    next()
  },
}
</script>
<style scoped lang="scss">
.header{
  height: 60px;
  width: 100%;
  background-color:#01183F;
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  // border-bottom: 1px solid #2a2659;
  box-sizing: border-box;

}
.msg-number{
  font-size: 12px;
  color: #f00;
  position: relative;
  top: -8px;
  left: -5px;
}
.header .logo{
    width: 400px;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items:center;
    justify-content:space-around;
    flex-shrink: 0;
    padding:10px 20px;
    box-sizing: border-box;
    img{
      width: 45px;
      height: 45px;
    }
    .title{
      font-size: 26px;
      text-align: center ;
      color: #fff;
      font-size:20px;
    }
	&::after{
		content: '';
		display: inline-block;
		width:2px;
		height:18px;
		background-color: rgba(255, 255, 255, 0.31);
		position: relative;
		right: -14px;
	}

  }

 .header .nav{
    flex-basis: 200px;
    display: flex;
    flex-wrap: nowrap;
    justify-content:space-around;
    .navitem{
      padding: 20px 10px;
      font-size: 16px;
      flex: 1;
      text-align: center;
      text-decoration:none;
      font-family:'微软雅黑';
      color: #fff;
      cursor: default;
      overflow: hidden;
      background-size:100% 100% !important;
	  position: relative;
      &.active{
		  color: #8ffffa;
        //background: url(~@/assets/images/home//header-nav.png) no-repeat center;
		//background: linear-gradient(to right, #002056 10%, #008a84 50%, #002056 90%);
		&:after{
			content: '';
			display: block;
			width: 100%;
			height: 6px;
			background-size: 100% 100%;
			position: absolute;
			bottom: 5px;
			left:0px;
			background: radial-gradient(#3ffff7, #002056 73%);
		}
      }
	  &::before{
		  margin-right: 10px;
	  }
    }
  }

.header .tool-bar{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content:flex-end;
    flex:30%;
    color: #fff;
    &>div{
      margin-right: 20px;
      font-size: 20px;
      cursor:default;
    }

    .user{
      .utitle{
        display: flex;
        align-items: center;
        font-size: 14px;
      }
      .uphoto{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
        display:inline-block;
        text-align: center;
        line-height: 30px;
        font-size: 20px;
      }

      .username{
        max-width:100px;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
 
    
} 

.main{
  height: calc(100vh - 60px);
  position: relative;
  overflow: hidden;
}


</style>
